import './modeler.css';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

import { defineComponent, onMounted } from 'vue';
import createDefaultBpmnXml from '../../bpmn/defaultBpmnXml';
import activitiModdel from '../../bpmn/resources/activiti-moddel.json';
import flowableModdel from '../../bpmn/resources/flowableDescriptor.json';
import translate from '../../bpmn/i18n';
import { BpmnStore } from '@/components/bpmn-process-designer/bpmn/store';
import { useBpmnData } from '@/store/modules/bpmnData';
import { storeToRefs } from 'pinia';

const bpmnDataStore = useBpmnData();
let { xmlData } = storeToRefs(bpmnDataStore);

export default defineComponent({
  name: 'Modeler',
  props: {
    xmlDate: {
      type: String,
      default: ''
    }
  },
  setup() {
    const bpmnContext = BpmnStore;
    onMounted(() => {
      bpmnContext.initModeler({
        container: '#modeler-container',
        additionalModules: [
          //添加翻译
          { translate: ['value', translate('zh')] }
        ],
        // activiti: activitiModdel
        moddleExtensions: {
          flowable: flowableModdel
        }
      });
      const defaultProcessIdAndName = '1';
      if (
        xmlData.value === '' ||
        xmlData.value === null ||
        xmlData.value === undefined
      ) {
        bpmnContext
          .importXML(
            createDefaultBpmnXml(
              defaultProcessIdAndName,
              defaultProcessIdAndName
            )
          )
          .then((result: Array<string>) => {
            if (result.length) {
              console.warn('importSuccess warnings', result);
            }
          })
          .catch((err: any) => {
            console.warn('importFail errors ', err);
          });
      } else {
        bpmnContext
          .importXML(xmlData.value)
          .then((result: Array<string>) => {
            if (result.length) {
              console.warn('importSuccess warnings', result);
            }
          })
          .catch((err: any) => {
            console.warn('importFail errors ', err);
          });
      }
    });

    return () => <div id="modeler-container" />;
  }
});
